<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for</title>
  <script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
  <!--
    key: 必须要添加，必须是唯一值，必须是数字或者字符串
    作用： 提高重排效率，就地复用 （diff算法）
  -->
  <!-- 1、遍历数组 -->
  <div v-for="(item,index) in list" :key="item">
    {{item}} == {{index}}
  </div>
  <!-- 2、遍历对象 -->
  <div v-for="(item,value,index) in obj">
    {{item}} == {{value}} == {{index}}
  </div>
  <!-- 3、遍历数字 -->
  <div class="box">
    <div v-for="i in 5">
      <div>免费</div>
    </div>
    <div v-for="item in section">
      {{item.title}}
      <div v-for="itemPage in item.pageSection">
        {{itemPage.title}}
      </div>
    </div>
  </div>
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3, 4],
      obj: {
        name: 'zs',
        age: 18,
        sex: '男'
      },
      section: [
        {
          id: 0,
          title: 'js基础之变量、数据类型与运算',
          pageSection: [
            {
              id: 0,
              title: '数据类型与运算'
            },
            {
              id: 1,
              title: '数据类型与运算2'
            },
            {
              id: 2,
              title: '数据类型与运算3'
            }
          ]
        },
        {
          id: 1,
          title: 'js基础之变量、数据类型与运算1111111',
          pageSection: [
            {
              id: 0,
              title: '数据类型与运算'
            },
            {
              id: 1,
              title: '数据类型与运算2'
            },
            {
              id: 2,
              title: '数据类型与运算3'
            }
          ]
        }
      ]
    },
    methods: {

    }
  })
</script>
</html>